<template>
    <div class="main-content">
        <TableLayoutes form-title="" class="table-list" > 
            <div class="table-title" slot="table-title">
                <span class="table-title-span">服务种类</span>
                <!-- <el-button @click="addType()">添加</el-button> -->
            </div>
            <el-table :data="tableData" border  style="width: 100%" v-loading="loading">                     
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品详情" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sDesc  | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </TableLayoutes>

        <!-- 添加服务种类 -->
        <!-- <add-service-type :addTypeData='addTypeData' @search='getTableData'></add-service-type> -->
    </div>
</template>

<script>
    // import addServiceType from './addServiceType';
    import TableLayoutes from 'components/TableLayoutes';
    import { listIncrementService } from 'api/serviceManage';
    export default{
        name: 'serviceType',
        components: {TableLayoutes},
        data() {
            return {
                loading: true,
                // addTypeData: {
                //     dialogState: false
                // },
                tableData: []
            }
        },
        computed: {
        },
        created() {
            this.getTableData();
        },
        methods: {
            getTableData() {
                listIncrementService().then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        // 商品类型(1:服务种类 2:收费方式 3：收费范围)
                        response.data.content.forEach(function(element) { 
                            if (element.sType == '1') {
                                this.tableData.push(element);
                            }
                        }, this);
                    }
                }).catch(() => {
                    this.loading = false;
                });
            }
            // addType() {
            //     this.addTypeData.dialogState = true;
            // }
        }
    }
</script>
<style lang="scss">
    .main-content {
        position: relative;
        padding: 0px;
        .table-list {
            .table-box {
                margin-top:0;
                margin-bottom: 20px;
            }
        } 
    }
</style>                     